<template>
	<div class="body">
		<el-form ref="form" :model="form" label-width="100rem" class="form">
            <el-form-item label="昵称:">
                <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="介绍:">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="form.motto">
                </el-input>
            </el-form-item>
            <el-form-item label="性别:">
                <template>
                    <el-radio v-model="form.gendar" label="0">保密</el-radio>
                    <el-radio v-model="form.gendar" label="1">男</el-radio>
                    <el-radio v-model="form.gendar" label="2">女</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="出生日期:">
                <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="故乡:">
                <el-cascader v-model="form.nativePlace" :options="data.cityData">
                </el-cascader>
            </el-form-item>
            <el-form-item label="职位:">
                <el-input v-model="form.position"></el-input>
            </el-form-item>
<!--            <el-form-item label="等级">
                <el-input v-model="form.level"></el-input>
            </el-form-item>-->
            <el-form-item label="电话:">
                <el-input v-model="form.tel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="上传头像:">
                <el-upload
                    class="avatar-uploader"
                    action=""
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="form.img" :src="form.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button @click="save" type="primary">保存</el-button>
                <el-button @click="cancel"  >取消</el-button>
            </el-form-item>
        </el-form>
	</div>
</template>
<script>
    import {
		mapState
    } from 'vuex'
    import saveSetting from '@/api/user/setting/saveSetting.js';
    import uploadHead from '@/api/file/upload.js';
    import cityData from '@/assets/json/citydata.js'
	export default {
		data() {
			return {
                form:this.$store.state.userInfo,
                data:{
                    userName:'',
                    gendar:'',
                    birthday:"",
                    acceptImg: '.png,.jpg',
                    cityData
                }
			};
        },
        computed: mapState(['userInfo']),
		mounted(){if(this.userInfo.nativePlace) {
                this.form = this.userInfo
                this.form.nativePlace = JSON.parse(this.userInfo.nativePlace)
            }
		},
        watch: {
            userInfo(val) {
                this.form = val
                this.form.nativePlace = JSON.parse(this.userInfo.nativePlace)
            }
        },
		methods: {
            async beforeAvatarUpload(img) {

                let fd = new FormData();
                fd.append("file",img);
                let res = await uploadHead(fd)
                if (res.success){
                    this.form.img = res.data.url
                }


/*                let acceptType = this.acceptImg.replace(/[.]/g, '').split(',');
                let acceptSize = 1024 * 1024 * 5;

                let len = img.name.split('.').length;
                let type = img.name.split('.')[len - 1];
                let  size = img.size;

                if (size > acceptSize) {
                    this.$message.error('上传文件大小不能超过 5MB!');
                    return false;
                } else if (acceptType.indexOf(type) == -1) {
                    this.$message.error('上传文件只能是' + this.acceptImg);
                    return false;
                }*/


            },
            handleAvatarRemove() {

            },
			reset() {
				this.html = ''
				this.$message({
					message: '清空成功',
					type: 'success'
				});
			},
			async save() {
                let res = await saveSetting(this.form)
                if(res.success) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    this.$router.push({path:'/user',query: {activeIndex:'-1'}})
                }

			},
            cancel() {
                this.$router.push({path:'/user',query: {activeIndex:'-1'}})
            }
		}
	}
</script>

<style lang="scss" scoped>

	.body {
		width: 100%;
		display: block;
		.form {
            padding: 0rem 30rem 20rem 10rem;
            box-sizing: border-box;
            .avatar-uploader {
                width: 80rem;
                height: 80rem;
                border: 1rem #eee dashed;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4rem;
                transition: all 0.4s;
                cursor: pointer;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .avatar-uploader:hover {
                border-color: $color;
            }
        }
	}
</style>
